<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<!-- 基地 -->
		<meta charset="utf-8">
		<title>研学基地</title>
		<link rel="stylesheet" type="text/css" href="css/index/commonality.css" />
		<link rel="stylesheet" type="text/css" href="css/index/index_base.css" />
		<!--element-ui-->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 地图API -->
		<link rel="stylesheet" href="https://cache.amap.com/lbs/static/main1119.css" />
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=903a28585001da28fdbbd5d5890c059f&plugin=AMap.Autocomplete,AMap.PlaceSearch"></script>
		<script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>

	</head>
	<body>
		<header>
			<!-- 头部暂时不用写 -->
			<iframe src="tool/header/index_header_search.html" width="100%" height="130px" frameborder="0" scrolling="no"></iframe>
		</header>
		<section>
			<!-- 内容部分 -->
			<div id="map">
				<!-- 地图工具 -->
				<div id="ditu">
					<div id="container"></div>
					<div id="myPageTop">
						<table>
							<tr>
								<td>
									<input id="tipinput" placeholder="请输入" />
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div>
			<div id="section-location">
				<!--<span>您的位置&nbsp;>|&nbsp;首页&nbsp;>&nbsp;基地</span>-->
				<h4>您的位置 >|</h4>
				<h4><a href="javascript:void(0);">首页 ></a></h4>
				<h4><a href="javascript:void(0);">基地</a></h4>
			</div>
			<div id="shaixuan">
				<div class="cation-middle">
					<dl class="cation-list">
						<dt>基地地区：</dt>
						<dd class="cation-province">
							<a href="javascript:void(0);">全部</a>
							<a href="javascript:void(0);">省内</a>
							<a href="javascript:void(0);">华南</a>
							<a href="javascript:void(0);">华北</a>
							<a href="javascript:void(0);">东北</a>
						</dd>
					</dl>
					<dl class="cation-list">
						<dt>基地规模：</dt>
						<dd class="cation-guimo">
							<a href="javascript:void(0);">全部</a>
							<a href="javascript:void(0);">国家级</a>
							<a href="javascript:void(0);">省级</a>
							<a href="javascript:void(0);">地级</a>
							<a href="javascript:void(0);">其他</a>
						</dd>
					</dl>
					<dl class="cation-list">
						<dt>基地特色：</dt>
						<dd class="cation-tese">
							<a href="javascript:void(0);">全部</a>
							<a href="javascript:void(0);">传统文化</a>
							<a href="javascript:void(0);">革命传统</a>
							<a href="javascript:void(0);">国情教育</a>
							<a href="javascript:void(0);">国防工科</a>
							<a href="javascript:void(0);">自然生态</a>
						</dd>
					</dl>
					<dl class="cation-list">
						<dt>服务对象：</dt>
						<dd class="cation-fuwu">
							<a href="javascript:void(0);">全部</a>
							<a href="javascript:void(0);">小学生</a>
							<a href="javascript:void(0);">初中生</a>
							<a href="javascript:void(0);">高中生</a>
						</dd>
					</dl>
				</div>
			</div>
			<div class="base-section-details-list">
				<div class="base-section-img">
					<img src="img/index/河南博物院.jpg" />
				</div>
				<div class="text-list">
					<ul>
						<li><span class="headline">河南博物院</span>
						<li>
						<li>
							<div class="app">
								<el-rate v-model="value" disabled text-color="#ff9900">
								</el-rate>
							</div>
						</li>
						<li><span class="oval">传统文化</span></li>
						<li><a href="javascript:void(0);" class="info">查看详情</a></li></br></br>
						<p id="text-one">
							河南博物院创立于1927年，新馆于1998年5月正式开放，现为中央与地方共建的国
							家级博物馆。长期以来，被评为全国爱国主义教育示范基地、国家级科普教育基地、
							全国首批港澳青少年游学基地和各级中小学校外实践基地，其馆藏文物精美多样、
							陈列展览主题鲜明、教育活动丰富多彩，是面向广大中小学生群体开展文化服务和
							公众教育的文化窗口与互动平台。
						</p>
					</ul>
				</div>
			</div>
			<div class="base-section-details-list">
				<div class="base-section-img">
					<img src="img/index/清明上河园.jpg" />
				</div>
				<div class="text-list">
					<ul>
						<li><span class="headline">清明上河园</span>
						<li>
						<li>
							<div class="appo">
								<el-rate v-model="value" disabled text-color="#ff9900">
								</el-rate>
							</div>
						</li>
						<li><span class="oval">传统文化</span></li>
						<li><a href="javascript:void(0);" class="info">查看详情</a></li></br></br>
						<p id="text-one">
							清明上河园是由河南省开封市人民政府与海南置地集团公司合作建设的一座大型
							宋代文化实景主题公园，坐落在开封市龙亭湖西岸，是国家首批AAAAA级旅游景区和中
							国非物质文化遗产展演基地。它是以画家张择端的写实画作《清明上河图》为蓝本，
							按照《营造法式》为建设标准，以宋朝市井文化、民俗风情、皇家园林和古代娱乐为题材，
							以游客参与体验为特点的文化主题公园。集中再现原图风物景观的大型宋代民俗风情游
							乐园，再现了古都汴京千年繁华的胜景。
						</p>
					</ul>
				</div>
			</div>
			<div class="base-section-details-list">
				<div class="base-section-img">
					<img src="img/index/洛邑古城.png" />
				</div>
				<div class="text-list">
					<ul>
						<li><span class="headline">洛邑古城</span>
						<li>
						<li>
							<div class="appt">
								<el-rate v-model="value" disabled text-color="#ff9900">
								</el-rate>
							</div>
						</li>
						<li>&nbsp;&nbsp;&nbsp;<span class="oval">传统文化</span></li>
						<li><a href="javascript:void(0);" class="info">查看详情</a></li></br></br>
						<p id="text-one">
							洛邑古城项目一期为洛邑古城文峰塔非遗园区，位于河南省洛阳市老城区。
							项目范围冬至新街，西至金业路，南至南护城河，北至中州东路，总规划面积1360亩。是一个
							集游、玩、吃、住、购于一体的综合性人文旅游观光区。园区内，文峰塔屹立千年，金元故城
							墙犹可追寻，府文庙、四眼井、新潭遗址历史遗迹星罗棋布。整个园区一步一景，人文气息浓厚。
						</p>
					</ul>
				</div>
			</div>
			<!-- 分页 -->
			<div id="paging">
				<iframe src="index_paging.html" width="100%" height="50px" frameborder="0"></iframe>
			</div>
		</section>
		<footer>
			<!-- 尾部 -->
			<iframe src="tool/footer/index_foot.html" width="100%" frameborder="0" scrolling="no" class="index_footer"></iframe>
		</footer>
	</body>
	<!-- 地图API-->
	<script src="js/vue.js"></script>
	<script src="js/element-ui.js"></script>
	<script src="js/jquery-1.9.1.js"></script>
	<script src="js/index/index_base.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		new Vue({
			el: '.app',
			data() {
				return {
					value: 3
				}
			}
		})
		new Vue({
			el: '.appo',
			data() {
				return {
					value: 4
				}
			}
		})
		new Vue({
			el: '.appt',
			data() {
				return {
					value: 5
				}
			}
		})
		//地图加载
		var map = new AMap.Map("container", {
			resizeEnable: true,
			zoom: 11, //级别
			center: [116.397428, 39.90923], //中心点坐标
			viewMode: '3D' //使用3D视图
		});
		//输入提示
		var autoOptions = {
			input: "tipinput"
		};
		var auto = new AMap.Autocomplete(autoOptions);
		var placeSearch = new AMap.PlaceSearch({
			map: map
		}); //构造地点查询类
		AMap.event.addListener(auto, "select", select); //注册监听，当选中某条记录时会触发
		function select(e) {
			placeSearch.setCity(e.poi.adcode);
			placeSearch.search(e.poi.name); //关键字查询查询
		}
	</script>
</html>
